import Image from "next/image";
import { RxStarFilled } from "react-icons/rx";

const portrait = [
  {
    id: "1",
    image: "/portrait.webp",
  },
  {
    id: "2",
    image: "/portrait.webp",
  },
  {
    id: "3",
    image: "/portrait.webp",
  },
  {
    id: "4",
    image: "/portrait.webp",
  },
  {
    id: "5",
    image: "/portrait.webp",
  },
];
const star = {
  icon: <RxStarFilled />,
  count: 5,
};
export default function Marketing() {
  return (
    <div className="flex flex-col width-w mt-[80px] mx-auto">
      <h1 className="text-[64px] font-[800] font-[work sans] leading-[1]">
        <span className="text-[#1D4FD7]">Marketing tools</span> for Solopreneurs
        who hate marketing
      </h1>
      <div className="mt-[24px] text-[#626262] text-[22px] font-[500] font-[inter] whitespace-pre-wrap ">
        AI is ready to be your marketing co-pilot. From analyzing your ideal
        customer to generating a unique value proposition for your one-person
        business.
        <br />
        <br />
        Forget about marketing procrastination — you get the right answers in
        seconds.
      </div>
      <button className=" self-start px-[24px] py-[15px] bg-[rgba(36,95,235,1)] rounded-lg mt-[80px] mb-[18px] font-[700] text-[18px] text-white">
        Get a perfect marketing strategy
      </button>
      <div className="flex items-center mb-[80px] self-start">
        <ul className="flex">
          {portrait.map((item) => {
            return (
              <li
                key={item.id}
                className="rounded-[50%] overflow-hidden me-[-10px]"
              >
                <Image src={`${item.image}`} alt="por" width={40} height={40} />
              </li>
            );
          })}
        </ul>
        <div className="ml-[20px] flex flex-col">
          <div className="flex">
            {Array.from({ length: star.count }, (_, index) => (
              <span key={index} className="star self-start">
                {star.icon}
              </span>
            ))}
          </div>
          <div className="text-[14px] leading-[20px] mt-1">
            {" "}
            Trusted by Founders
          </div>
        </div>
      </div>
      <Image
        src="/bubble.png"
        alt=".."
        width={1051}
        height={34.99}
        style={{ width: "auto" }}
        className="w-[calc(100%-0px)]  mx-auto"
      />
    </div>
  );
}
